<template>
  <div class="fullScreen">
    <!-- allowTouchMove="false"或者在swiper加上class="swiper-no-swiping" -->
    <swiper 
    :slides-per-view="1"
    :space-between="0"
    loop
    observer
    updateOnWindowResize
    navigation
    :lazy="lazy"
    :allowTouchMove="allowTouchMove"
    :autoplay="autoplay"
    :pagination="pagination"
    @swiper="onSwiper"
    @slideChange="onSlideChange">
      <swiper-slide v-for="(item,index) in list" :key="index">
        <!-- Required swiper-lazy class and image source specified in data-src attribute -->
        <div class="pic-wrap"><img :data-src="item.url" class="pic swiper-lazy" /></div>
        
        <!-- Preloader image -->
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import 'swiper/swiper-bundle.min.css'
import SwiperCore, { Navigation, Pagination, Scrollbar, Lazy, Controller, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { reactive, ref, onMounted,onUnmounted, nextTick, watchEffect } from 'vue'
SwiperCore.use([Lazy,Pagination,Navigation,Controller,Scrollbar,Autoplay]);
export default {
  name:'fullScreen',
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    currentRate:{
      type: [Number,String],
      default: 10
    },
    list:{ 
      type: Array,
      default: ()=>[
        {url: require('@/assets/images/slide/05.jpg'),title:'西丽社区店'},
        {url: require('@/assets/images/slide/02.jpg'),title:'上梅林店'},
        {url: require('@/assets/images/slide/03.jpg'),title:'龙珠Copse店'},
        {url: require('@/assets/images/slide/04.jpg'),title:'天通苑北苑店'},
      ]
    },
  },
  setup(props){
    const swiperRef = ref(null)
    const onSwiper = (swiper) => {
      swiperRef.value = swiper
    };
    const onSlideChange = (swiper) => {
      console.log(40,'slide change');
    };

    onMounted(()=>{
      // swiperRef.value.slideTo(1,200)
      setTimeout(()=>{
        reFun()
      }, 600)
    })

    const allowTouchMove = ref(false)
    const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    const reFun = () => {
      const screenW = +document.body.clientWidth || 0
      allowTouchMove.value = screenW<768
      nextTick(()=>{
        swiperRef.value&&swiperRef.value.update()
      })
    }
    window.addEventListener(resizeEvt, reFun, false)
    reFun()

    onUnmounted(()=>{
      window.removeEventListener(resizeEvt, reFun, false)
    })

    const autoplay = {
      delay: 10000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    }
    
    const pagination = { 
      clickable: true, 
      type:'custom',
      renderCustom: function (swiper, current, total) {
        const span = `<span>${current + ' / ' + total}</span>`;
        const title = `<span class="ml20">${props.list[current-1].title}</span>`;
        return `<div class="tl pb20 white f13 pl30">${span+title}</div>`;
      } 
    }
    const lazy = {
      loadPrevNext: true,
    }
    
    watchEffect((ret)=>{
      if(props.list.length){
        nextTick(()=>{
          swiperRef.value&&swiperRef.value.lazy.load()
        })
      }
    })

    return {
      lazy, allowTouchMove,
      autoplay,
      pagination,
      onSwiper,
      onSlideChange,
    };
  }
}
</script>
<style lang="less" scoped>
.fullScreen{
  color: #333;
  position: relative;
  height: 100%;
}
.pic-wrap{
  height: 100vh;
  width: 100vw;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  .pic{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}
.screen-bot{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.fullScreen {
  ::v-deep(.swiper-button-prev),::v-deep(.swiper-button-next){
    width: 50%;
    height: 100%;
    top: 0;
    opacity: 0;
    &::after{
      display: none;
    }
    &.swiper-button-prev{
      cursor: url(),auto;
    }
    &.swiper-button-next{
      cursor: url(),auto;
    }
  }
}
</style>